<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>UserProfile-ProjectManagment</title>
    <meta content='width=device-width, initial-scale=1.0, shrink-to-fit=no' name='viewport'/>
    <link rel="icon" th:href="@{/assets/img/icon.ico}" type="image/x-icon"/>
    <div th:replace="commom/bar :: commom_css"></div>
    <link rel="stylesheet" th:href="@{/assets/js/bootstrap-datepicker-master/css/bootstrap-datepicker3.standalone.css}">
</head>
<body>
<div class="wrapper">
    <div th:replace="commom/bar :: topbar"></div>

    <!-- Sidebar -->
    <div th:replace="commom/bar :: sidebar"></div>
    <!-- End Sidebar -->
    <div class="main-panel">
        <div class="content">
            <div class="page-inner">
                <h4 class="page-title">用户简介</h4>
                <div class="row">
                    <div class="col-md-8">
                        <div class="card card-with-nav">
                            <div class="card-header">
                                <div class="row row-nav-line">
                                    <ul class="nav nav-tabs nav-line nav-color-secondary" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link active show" id="pills-home-tab-nobd" data-toggle="pill"
                                               href="#pills-profile-nobd" role="tab" aria-controls="pills-profile-nobd"
                                               aria-selected="true">个人信息</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" id="pills-profile-tab-nobd" data-toggle="pill"
                                               href="#pills-security-nobd" role="tab"
                                               aria-controls="pills-security-nobd" aria-selected="false">安全管理</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="card-body tab-pane fade show active" role="tabpanel"
                                 aria-labelledby="pills-home-tab-nobd">
                                <div class="tab-content mt-2 mb-3" id="pills-without-border-tabContent">
                                    <div class="tab-pane fade show active" id="pills-profile-nobd" role="tabpanel"
                                         aria-labelledby="pills-home-tab-nobd">
                                        <form th:action="@{/user}" method="post">
                                            <input type="hidden" name="_method" value="put"/>
                                            <input type="hidden" name="id" th:if="${#authentication.principal.id!=null}"
                                                   th:value="${#authentication.principal.id}"/>
                                            <div class="row mt-3">
                                                <div class="col-md-6">
                                                    <div class="form-group form-group-default">
                                                        <label>名称</label>
                                                        <input type="text" class="form-control" name="username"
                                                               placeholder="Name" autocomplete="off"
                                                               th:value="${#authentication.principal.username!=null}?${#authentication.principal.username}">
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group form-group-default">
                                                        <label>邮箱</label>
                                                        <input type="email" class="form-control" name="email"
                                                               placeholder="Name" autocomplete="off" readonly="true"
                                                               th:value="${#authentication.principal.email!=null}?${#authentication.principal.email}">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row mt-3">
                                                <div class="col-md-4">
                                                    <div class="form-group form-group-default">
                                                        <label>出生日期</label>
                                                        <input type="text" class="form-control" id="birthday"
                                                               name="birthday" placeholder="Birth Date"
                                                               autocomplete="off"
                                                               th:value="${#authentication.principal.birthday!=null}?${#dates.format(#authentication.principal.birthday, 'yyyy-MM-dd')}">
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="form-group form-group-default">
                                                        <label>性别</label>
                                                        <select class="form-control" id="gender" name="gender">
                                                            <option th:text="男" value="1" autocomplete="off"
                                                                    th:if="${#authentication.principal.gender!=null}and${#authentication.principal.gender}==1">
                                                                男
                                                            </option>
                                                            <option th:text="女" value="0" autocomplete="off"
                                                                    th:if="${#authentication.principal.gender!=null}and${#authentication.principal.gender}==0">
                                                                女
                                                            </option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="form-group form-group-default">
                                                        <label>手机</label>
                                                        <input type="text" class="form-control" name="phone"
                                                               placeholder="Phone" autocomplete="off"
                                                               th:value="${#authentication.principal.phone!=null}?${#authentication.principal.phone}">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row mt-3">
                                                <div class="col-md-12">
                                                    <div class="form-group form-group-default">
                                                        <label>地址</label>
                                                        <input type="text" class="form-control" name="address"
                                                               placeholder="Address" autocomplete="off"
                                                               th:value="${#authentication.principal.address!=null}?${#authentication.principal.address}">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row mt-3 mb-1">
                                                <div class="col-md-12">
                                                    <div class="form-group form-group-default">
                                                        <label>关于我</label>
                                                        <textarea class="form-control" name="introduce"
                                                                  placeholder="这家伙很懒，什么都没有留下" rows="3"
                                                                  autocomplete="off"
                                                                  th:value="${#authentication.principal.introduce!=null}?${#authentication.principal.introduce}"></textarea>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="text-right mt-3 mb-3">
                                                <button class="btn btn-secondary" type="submit">保存</button>
                                                <button class="btn btn-primary" type="reset">重置</button>
                                            </div>
                                        </form>
                                    </div>
                                    <div class="tab-pane fade" id="pills-security-nobd" role="tabpanel"
                                         aria-labelledby="pills-security-tab-nobd">
                                        <form th:action="@{/user}" method="post">
                                            <input type="hidden" name="_method" value="put"/>
                                            <input type="hidden" name="id" th:if="${#authentication.principal.id!=null}"
                                                   th:value="${#authentication.principal.id}"/>
                                            <div class="form-group form-floating-label">
                                                <input id="oldpassword" name="oldpassword" type="password"
                                                       class="form-control input-border-bottom" required>
                                                <label for="oldpassword" class="placeholder">旧密码</label>
                                            </div>
                                            <div class="form-group form-floating-label">
                                                <input id="password" name="password" type="password"
                                                       class="form-control input-border-bottom" required>
                                                <label for="password" class="placeholder">新密码</label>
                                            </div>
                                            <div class="form-group form-floating-label">
                                                <input id="confirmpassword" name="confirmpassword" type="password"
                                                       class="form-control input-border-bottom" required>
                                                <label for="confirmpassword" class="placeholder">确认密码</label>
                                            </div>

                                            <div class="text-right mt-3 mb-3">
                                                <button class="btn btn-secondary" type="submit">保存</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card card-profile card-secondary">
                            <div class="card-header" style="background-image: url('../assets/img/blogpost.jpg')">
                                <div class="profile-picture">
                                    <div class="avatar avatar-xl">
                                        <a data-toggle="modal" data-target="#photo">
                                            <img th:src="@{/files/photo/{filename}(filename=${#authentication.principal.photo})}"
                                                 alt="..." class="avatar-img rounded-circle"
                                                 th:if="${#authentication.principal.photo}!=null">
                                            <img th:src="@{/assets/img/profile.jpg}" alt="..."
                                                 class="avatar-img rounded-circle"
                                                 th:if="${#authentication.principal.photo}==null">
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="user-profile text-center">
                                    <div class="name"
                                         th:text="${#authentication.principal.username!=null}?${#authentication.principal.username}"></div>
                                    <div class="job">Frontend Developer</div>
                                    <div class="desc">A man who hates loneliness</div>
                                    <div class="social-media">
                                        <a class="btn btn-info btn-twitter btn-sm btn-link" href="#">
                                            <span class="btn-label just-icon"><i class="flaticon-twitter"></i> </span>
                                        </a>
                                        <a class="btn btn-danger btn-sm btn-link" rel="publisher" href="#">
                                            <span class="btn-label just-icon"><i
                                                    class="flaticon-google-plus"></i> </span>
                                        </a>
                                        <a class="btn btn-primary btn-sm btn-link" rel="publisher" href="#">
                                            <span class="btn-label just-icon"><i class="flaticon-facebook"></i> </span>
                                        </a>
                                        <a class="btn btn-danger btn-sm btn-link" rel="publisher" href="#">
                                            <span class="btn-label just-icon"><i class="flaticon-dribbble"></i> </span>
                                        </a>
                                    </div>
                                    <div class="view-profile">
                                        <a href="#" class="btn btn-secondary btn-block">View Full Profile</a>
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer">
                                <div class="row user-stats text-center">
                                    <div class="col">
                                        <div class="number">125</div>
                                        <div class="title">Post</div>
                                    </div>
                                    <div class="col">
                                        <div class="number">25K</div>
                                        <div class="title">Followers</div>
                                    </div>
                                    <div class="col">
                                        <div class="number">134</div>
                                        <div class="title">Following</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <!--上传文件model-->
    <div class="modal fade" id="photo" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true" th:fragment="uploadfilemodel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">上传头像</h5>
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">x</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form th:action="@{/photo}" method="post" enctype="multipart/form-data">
                        <div class="container kv-main">
                            <input type="hidden" name="userId" th:value="${#authentication.principal.id}">
                            <div class="form-group">
                                <input id="file-1" type="file" name="files" multiple class="file"
                                       data-overwrite-initial="false" data-min-file-count="2">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

</div>
<!--公共JS-->
<th:block th:replace="commom/bar :: commom_js"/>
<!-- fileinput -->
<script th:src="@{/assets/js/plugin/fileinput/fileinput.js}" type="text/javascript"></script>
<script th:src="@{/assets/js/plugin/fileinput/fileinput_locale_zh.js}" type="text/javascript"></script>

<script th:src="@{/assets/js/bootstrap-datepicker-master/js/bootstrap-datepicker.min.js}"></script>
<script th:src="@{/assets/js/bootstrap-datepicker-master/locales/bootstrap-datepicker.zh-CN.min.js}"></script>
<!--公共JS-->
<th:block th:replace="commom/bar :: nav_js"/>

<!--检查密码是否一致-->
<script>
    $(function () {
        $("#confirmpassword").keyup(function () {
            checkpassword();
        })
    })

    function checkpassword() {
        var password1 = $("#password").val();
        var password2 = $("#confirmpassword").val();
        var confirmpassword = $("#confirmpassword");
        if (password1 != password2) {
            confirmpassword.css('borderColor', 'red');
            return false;
        } else {
            confirmpassword.css('borderColor', '');
        }
    }
</script>
<!--上传头像js-->
<script>
    var userId = [[${#authentication.principal.id}]];
    var file = $()
    $("#file-1").fileinput({
        language: 'zh',
        theme: "explorer-fa",                               // 主题
        enctype: 'multipart/form-data',
        uploadUrl: '/photo',
        uploadExtraData: {'userId': userId},
        uploadAsync: false,//异步上传
        dropZoneEnabled: true,                          // 是否可拖拽
        dropZoneTitle: '支持jgp和png',
        uploadAsync: true, //默认异步上传
        minFileCount: 1,                                        // 最小上传数量
        maxFileCount: 1,
        showCancel: false,                                       // 显示取消按钮
        showUpload: false,
        showPreview: true,              //展前预览
        removeLabel: "移除",                          //移除按钮内容
        browseLabel: '选择',                            // 浏览按钮内容
        allowedFileExtensions: ['jpg', 'JPG', 'jpeg', 'JPEG', 'png'],
        maxFileSize: 1000,
        maxFilesNum: 10,
        fileActionSettings: {                               // 在预览窗口中为新选择的文件缩略图设置文件操作的对象配置
            showDownload: false,                                // 显示下载按钮
            showZoom: false,                                    // 显示预览按钮
            removeIcon: '<i class="fa fa-trash"></i>',   // 删除图标
            uploadIcon: '<i class="fa fa-upload"></i>',     // 上传图标
        },
        slugCallback: function (filename) {
            return filename.replace('(', '_').replace(']', '_');
        }
    }).on("fileuploaded", function (event, data) {
        var json = data.response;
        if (json.ok) {
            swal(json.message, {
                icon: "success",
                buttons: false,
                timer: 1500,
            });
            setTimeout(function () {
                location.href = json.data;
            }, 1500);
        }
    });
</script>
<!--时间插件-->
<script type="text/javascript">
    $('#birthday').datepicker({
        language: "zh-CN"
    })
</script>
</body>
</html>
